<template>
    <div class="container">
        <div class="flex pad-l-15 pad-r-15">
            <div class="flex flex-center" @click="isShowSelectPicker = true">
                <span class="font-15 font-color search-list  width-65">{{selectValue}}</span>
                <img class="width-10 height-5 mar-l-3" v-if="fileSpace" :src="fileSpace + '/images/cancellation-arrow-down.png'" alt="">
            </div>
            <van-search
            :value='val'
            placeholder="点击输入搜索内容"
            use-action-slot	
            @change="onChangeVal"
            @search="onSearch"
            class="search-box"
        >
                <van-button class="search-btn" size="small" slot="action" @tap="onSearch2">搜索</van-button>
            </van-search>
        </div>
        <div class="order-container pad-l-15 pad-r-15 mar-b-10" v-for="(item,index) in orders" :key="index" @click="to_order_details(item)">
            <div class="order-title flex flex-between">
                <div class="flex flex-between">
                    <div class="width-35 height-35 headshop-box">
                        <!-- 核销员头像 -->
                        <img v-if="item.avatar" class="width-35 height-35" :src="item.avatar" alt="">
                    </div>
                    <div class="mar-l-10">
                        <!-- 核销员昵称 -->
                        <div class="font-14 font-color font-w">{{item.verifierNickname}}</div>
                        <div class="tag font-9">核销员</div>
                    </div>
                    <!-- 分割线 -- 竖 -->
                    <div class="dividing-line mar-l-10"></div>
                    <div class="font-color-6 mar-l-15">
                        <!-- 订单编号 -->
                        <div class="font-13">{{item.orderNo}}</div>
                        <!-- 创建时间 -->
                        <div class="font-11 font-color-9">{{item.createTime}}</div>
                    </div>
                </div>
                <div class="width-5 height-10">
                    <img class="width-5 height-10" v-if="fileSpace" :src="fileSpace + '/images/arrow-right.png'" alt="">
                </div>
            </div>
            <div class="order-content" v-for="(children,i) in item.orderGoodsList" :key="i">
                <div class="order-row-box">
                    <div class="order-row flex flex-between">
                        <div class="img-box width-110 height-110">
                            <!-- 商品图片 -->
                            <img v-if="children.goodsImageUrl" :src="children.goodsImageUrl" alt="" class="width-110 height-110">
                        </div>
                        <div class="width-225 shop-content height-115">
                            <!-- 商品名称 -->
                            <div class="line-2 font-14 font-color mar-t--3">
                                {{children.goodsTitle}}
                            </div>
                            <!-- 商品规格 -->
                            <div class="line-1 font-color-9 select-content font-12" v-if="children.skuDetail">{{children.skuDetail}}</div>                            
                            <div>
                                <div v-if="children.memberIncome && Number(children.memberIncome) > 0" class="mar-t--5 mar-b--2">
                                    <div class="income">赚{{ children.memberIncome }}元</div>
                                </div>
                                <div class="flex flex-between font-color">
                                    <!-- 商品单价 -->
                                    <span class="font-14 font-w">￥{{children.goodsPrice}}</span>
                                    <!-- 商品数量 -->
                                    <span class="font-11">×{{children.goodsNum}}件</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flex flex-between font-14">
                    <div>订单状态</div>
                    <div class="font-w font-red" v-if="item.orderStatus === 1">待核销</div>
                    <div class="font-w" style="color:#20b675" v-if="item.orderStatus === 3">已收货</div>
                    <div class="font-w" style="color:#20b675" v-if="item.orderStatus === 4">已完成</div>
                </div>
                <div class="flex flex-between font-14 font-color mar-b-15">
                    <div>买家昵称</div>
                    <div>{{item.customerNickname}}</div>
                </div>
                <div class="flex flex-between font-14 font-color mar-b-15" v-if="item.orderStatus === 4">
                    <div>核销时间</div>
                    <div style="color:#20b675" class="font-12">{{item.payTime}}</div>
                </div>
            </div>
            <div class="font-14 font-color flex pad-t-17 pad-b-17">
                <div>共<span class="font-red">{{item.totalNum}}</span>件商品</div>
                <div class="mar-l-11">实付<span class="font-red">￥{{item.totalPrice}}</span></div>
            </div>
        </div>
        <div class="width-375 nodata-box" v-if="orders.length === 0">
            <img class="width-375 height-200" v-if="fileSpace" :src="fileSpace + '/images/not-data.png'" alt="">
            <div class="font-16 font-w font-color nodata">暂无数据</div> 
        </div>
        <van-popup
        :show="isShowSelectPicker"
        position="bottom"
        @close="onSelectClose"
        >
            <van-picker
                show-toolbar
                :columns="pickerSelectArray"
                @cancel="onSelectPickerClose"
                @confirm="onSelectConfirm"
            />
        </van-popup>
    </div>
</template>
<script>
import { pagingUserOrder } from '@/api/personal'
export default {
  data() {
    return {
      isShowSelectPicker: false,
      pickerSelectArray: ['订单号', '买家昵称', '核销员昵称'],
      selectValue: '订单号',
      orders: [], // 订单列表
      currentPage: 1,
      statusAry: [1, 2, 3],
      userType: '', // 用户类型 1 为店长  0 为店员
      memberId: '',
      val: '', // 搜索框内容
      pullLoad: {
        loading: false,
        finished: false
      },
      isFinish: 0
    }
  },
  mounted() {
    // this.userType = this.$pt.getStorageSync('personalType')
    this.memberId = this.getCustomerId
    this.val = ''
    this.currentPage = 1
    this.orders = []
    this.pageinit()
  },
  onPullDownRefresh() {
    this.currentPage = 1
    this.orders = []
    this.pageinit()
    setTimeout(() => {
      this.$pt.stopPullDownRefresh()
    }, 500)
  },
  onReachBottom() {
    // 触底刷新
    if (!this.pullLoad.finished) {
      this.pageinit()
    }
  },
  methods: {
    onSearch(e) {
      this.val = e.mp.detail
      this.currentPage = 1
      this.orders = []
      this.pageinit()
    },
    onChangeVal(e) {
      this.val = e.mp.detail
    },
    onSearch2() {
      // 搜索按钮点击事件
      this.currentPage = 1
      this.orders = []
      this.pageinit()
    },
    onSelectClose() {
      // 关闭popup弹出框
      this.isShowSelectPicker = false
    },
    onSelectPickerClose() {
      // pick取消事件
      this.isShowSelectPicker = false
    },
    onSelectConfirm(e) {
      // pick选定事件
      this.isShowSelectPicker = false
      this.selectValue = e.mp.detail.value
    },
    to_order_details(value) {
      this.$pt.navigateTo({url: '/pages/home/cancellation-desk/order-details/main?orderId=' + value.orderId})
    },
    pageinit() {
      // 页面加载
      let obj = {
        orderNo: this.selectValue === '订单号' ? this.val : '',
        customerNickname: this.selectValue === '买家昵称' ? this.val : '',
        verifierNickname: this.selectValue === '核销员昵称' ? this.val : ''
      }
      const params = {
        memberId: this.getCustomerId,
        userType: 1, // 用户类型 1 为店长  0 为店员
        currentPage: this.currentPage,
        size: 5
      }
      Object.assign(params, obj)
      pagingUserOrder(params).then((response) => {
        if (response.isError) return
        response.data.records.forEach(item => {
          let totalNum = 0
          let totalPrice = 0.00
          item.orderGoodsList.forEach(value => {
            totalNum += parseInt(value.goodsNum)
            totalPrice += parseFloat(value.goodsTotalPrice)
          })
          item.totalNum = totalNum
          item.totalPrice = totalPrice.toFixed(2)
          this.orders.push(item)
        })
        this.currentPage++
        if (this.orders.length === 0 || this.orders.length >= response.data.total) {
          this.pullLoad.finished = true
        }
      }).catch(() => {
      })
    }
  }
}
</script>
<style lang="less" scoped>
.income{
    background: #FFE1D1;
    color: #FF5A00;
    font-size: 12px;
    border-radius: 5px;
    padding: 2px 4px;
    line-height: 1;
    display: inline-block;
  }
.search-list{
    line-height: 1.3;
    display:-webkit-box;
    overflow:hidden;
    text-overflow:ellipsis;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    word-break:break-word;
}
.search-btn /deep/ .van-button--small{
    color: white;
    background: #333333;
    border-radius: 4px;
    margin-left: -5px;
    border: unset;
    width: 55px;
    // height: 30px;
    // line-height: 28px;
}
.search-box{
    width: 300px;
    /deep/ .van-search--show-action{
        background: unset !important;
    }
}
.search-box /deep/ .van-search__action{
    padding: unset;
    background: none !important;
    line-height: unset;
}
.order-container{
    background: white;
    &:last-child{
        margin-bottom: 0;
    }
    .order-title{
        // height: 50px;
        padding: 8px 0;
        border-bottom: 1px solid #ededed;
        .headshop-box{
            img{
                border-radius: 50%;
            }
        }
        .tag{
            border-radius: 15px;
            padding: 2px 5px;
            background: #f8c400;
            text-align: center;
            max-width: 35px
        }
        .dividing-line{
            width: 1px;
            height: 22px;
            background: #c5c5c5;
            // margin-top: 20px;
        }
    } 
    .order-content{
        border-bottom: 1px solid #ededed;
        .order-row-box{
            .order-row{
                padding: 11px 0 15px;
                border-bottom: 1px solid #ededed;
                &:last-child{
                    border-bottom: unset; 
                }
                .img-box{
                    // background: yellow;
                }
                .shop-content{
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    padding-top: 5px;
                }
                .select-content{
                    background: #f2f2f2;
                    padding-left: 5px;
                    margin: 5px 0;
                }
            }
        }
        
        .line-1, .line-2 {
            line-height: 21px;
            // height: unset;
            height: unset;
        }
        .line-1{
            height: 21px;
        }
        .line-2{
            max-height: 45px;
        }
    
    }  
}
.nodata-box{
    margin-top: 88px;
    .nodata{
        margin-top: -32px;
        text-align: center;
    }
}
</style>
